import React, {useRef} from 'react';
import CSSTransition from "react-transition-group/cjs/CSSTransition";
import { getName } from "../../../api/utils";
import { MiniPlayerContainer } from "../style";
import ProgressCircle from '../../../baseUI/progress-circle'

const MiniPlayer = (props) => {
    const { song, fullScreen, percent = 0.5, playing   } =  props;
    const { clickPlaying,toggleFullScreenDispatch } = props;
    const miniPlayerRef = useRef();
    // 暂停播放
    const renderPause = () => {
        return(
            <i
                className="icon-mini iconfont icon-pause"
                onClick={e => clickPlaying(e, false)}
            >&#xe650;</i>
        )
    };
    // 恢复播放
    const renderPlay = () => {
        return(
            <i
                className="icon-mini iconfont icon-play"
                onClick={e => clickPlaying(e, true)}
            >&#xe61e;</i>
        )
    };
    // 播放进度
    return (
        <CSSTransition
            in={!fullScreen}
            timeout={400}
            classNames='mini'
            onEnter={() => {
                miniPlayerRef.current.style.display = "flex";
            }}
            onExited={() => {
                miniPlayerRef.current.style.display = "none";
            }}
        >
            <MiniPlayerContainer
                ref={miniPlayerRef}
            >
                <div className="icon" onClick={() => toggleFullScreenDispatch(true)}>
                     <div className="imgWrapper">
                         <img
                             className={playing? 'play' : 'pause'}
                             src={song.al.picUrl}
                             width="40"
                             height="40"
                             alt="img"
                         />
                    </div>
                </div>
                <div className="text">
                     <h2 className="name">{song.name}</h2>
                    <p className="desc">{getName (song.ar)}</p>
                </div>
                {/*// 将原来的暂停按钮部分修改*/}
                <div className="control">
                    <ProgressCircle radius={32} percent={percent}>
                        {
                            playing ? renderPause() : renderPlay()
                        }
                    </ProgressCircle>
                </div>
                 <div className="control">
                    <i className="iconfont">&#xe640;</i>
                </div>
            </MiniPlayerContainer>
        </CSSTransition>
    )
};

export default React.memo(MiniPlayer)